<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Planeto</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/responsiveslides.min.js"></script>
    <script src="js/jquery.mixitup.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".header-slider").responsiveSlides({
                pager: true
            });
            $(".partner-slider").responsiveSlides({
                nav: true
            });
            $("#mix-container").mixitup();
        });
    </script>
</head>
<body>

<header id="page-header">
    <div id="nav">
        <div class="logo">
            <img src="images/logo.png" alt="">
        </div>
        <span class="menu-btn"></span>
        <ul>
            <li><a href="#" class="active">HOME</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">PROJECTS</a></li>
            <li><a href="#">CARRES</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <div id="header-main" class="container">
        <div class="header-title">
            <h1>TOP-NOTCH SERVICES IN ONE PLACE</h1>
            <div class="icn-1">
                <img src="images/icn-1.png" alt="">
            </div>
            <div class="icn-2">
                <img src="images/icn-2.png" alt="">
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="slider-div-abs">
            <div class="slider-div-rel">
                <ul class="header-slider">
                    <li><img src="images/slide-1.png" alt=""></li>
                    <li><img src="images/slide-2.png" alt=""></li>
                    <li><img src="images/slide-3.png" alt=""></li>
                </ul>
            </div>
        </div>
    </div>
</header>

<div class="ideas container">
    <div class="row-1">
        <div class="img-1">
        <img src="images/idea-1.png" alt="">
    </div>
        <div class="desc-1">
            <h1>WE HAVE IDEAS FOR EVERYONE</h1>
            <p>Lorem ipsum dolor sit amet,
                consectetur adipiscing elit.
                Fusce scelerisque nibh et neque
                faucibus suscipit. Sed auctor ipsum
                ut tellus faucibus tincidunt.
                Curabitur non quam facilisis,
                rhoncus ligula ac, pellentesque augue
                ipsum.
            </p>
            <a href="#" class="idea-btn">LEARN MORE</a>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="row-2">
        <div class="desc-2">
            <h1>WE HAVE IDEAS FOR EVERYONE</h1>
            <p>Lorem ipsum dolor sit amet,
                consectetur adipiscing elit.
                Fusce scelerisque nibh et neque
                faucibus suscipit. Sed auctor ipsum
                ut tellus faucibus tincidunt.
                Curabitur non quam facilisis,
                rhoncus ligula ac, pellentesque augue
                ipsum.
            </p>
            <a href="#" class="idea-btn">LEARN MORE</a>
        </div>
        <div class="img-2">
            <img src="images/idea-2.png" alt="">
        </div>
        <div class="clearfix"></div>
    </div>
 </div>

<!-- Stats --->

<div class="stats">
    <div class="container">
        <h1 class="title">Conquering web from 2009 and these are our stats ... so far ;)</h1>
        <ul>
            <li>
                <h1>186</h1>
                <p>satisfied clients</p>
            </li>
            <li>
                <img src="images/clk.png" alt="" class="s1">
                <h1>657</h1>
                <p>completed projects</p>
            </li>
            <li>
                <img src="images/clk.png" alt="" class="s2">
                <h1>1,340</h1>
                <p>coffees drinked</p>
            </li>
            <li>
                <img src="images/clk.png" alt="" class="s3">
                <h1>652</h1>
                <p>hours played battlefield 3</p>
            </li>
        </ul>
    </div>
</div>


<div class="partners container">
    <h1>OUR WONDERFUL PARTNERS</h1>
    <p>Move over to see testimonial</p>
    <ul class="partner-slider">
        <li>
            <div class="partner">
                <img src="images/prt-3.png" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet consectetur consequatur cupiditate dicta illo labore modi necessitatibus, nostrum officia quaerat quisquam, quod repudiandae sint, soluta temporibus unde! Minus, voluptate.</p>
            </div>
            <div class="partner">
                <img src="images/prt-4.png" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet consectetur consequatur cupiditate dicta illo labore modi necessitatibus, nostrum officia quaerat quisquam, quod repudiandae sint, soluta temporibus unde! Minus, voluptate.</p>
            </div>
            <div class="partner">
                <img src="images/prt-2.png" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet consectetur consequatur cupiditate dicta illo labore modi necessitatibus, nostrum officia quaerat quisquam, quod repudiandae sint, soluta temporibus unde! Minus, voluptate.</p>
            </div>
            <div class="clearfix"></div>
            <div class="partner">
                <img src="images/prt-1.png" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet consectetur consequatur cupiditate dicta illo labore modi necessitatibus, nostrum officia quaerat quisquam, quod repudiandae sint, soluta temporibus unde! Minus, voluptate.</p>
            </div>
            <div class="partner">
                <img src="images/prt-5.png" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet consectetur consequatur cupiditate dicta illo labore modi necessitatibus, nostrum officia quaerat quisquam, quod repudiandae sint, soluta temporibus unde! Minus, voluptate.</p>
            </div>
            <div class="partner">
                <img src="images/prt-5.png" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet consectetur consequatur cupiditate dicta illo labore modi necessitatibus, nostrum officia quaerat quisquam, quod repudiandae sint, soluta temporibus unde! Minus, voluptate.</p>
            </div>
            <div class="clearfix"></div>
        </li>
        <li>
            <div class="partner">
                <img src="images/prt-1.png" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet consectetur consequatur cupiditate dicta illo labore modi necessitatibus, nostrum officia quaerat quisquam, quod repudiandae sint, soluta temporibus unde! Minus, voluptate.</p>
            </div>
            <div class="partner">
                <img src="images/prt-2.png" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet consectetur consequatur cupiditate dicta illo labore modi necessitatibus, nostrum officia quaerat quisquam, quod repudiandae sint, soluta temporibus unde! Minus, voluptate.</p>
            </div>
            <div class="partner">
                <img src="images/prt-3.png" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet consectetur consequatur cupiditate dicta illo labore modi necessitatibus, nostrum officia quaerat quisquam, quod repudiandae sint, soluta temporibus unde! Minus, voluptate.</p>
            </div>
            <div class="clearfix"></div>
            <div class="partner">
                <img src="images/prt-4.png" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet consectetur consequatur cupiditate dicta illo labore modi necessitatibus, nostrum officia quaerat quisquam, quod repudiandae sint, soluta temporibus unde! Minus, voluptate.</p>
            </div>
            <div class="partner">
                <img src="images/prt-5.png" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet consectetur consequatur cupiditate dicta illo labore modi necessitatibus, nostrum officia quaerat quisquam, quod repudiandae sint, soluta temporibus unde! Minus, voluptate.</p>
            </div>
            <div class="partner">
                <img src="images/prt-6.png" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet consectetur consequatur cupiditate dicta illo labore modi necessitatibus, nostrum officia quaerat quisquam, quod repudiandae sint, soluta temporibus unde! Minus, voluptate.</p>
            </div>
            <div class="clearfix"></div>
        </li>
    </ul>
</div>

<div class="projects container">
    <h1>OUR AWESOME PROJECTS</h1>
    <div class="filter" data-filter="all">ALL</div>
    <div class="filter" data-filter="web">WEB</div>
    <div class="row" id="mix-container">
        <div class="col-md-4 mix web">
            <img src="images/p-1.jpg" alt="">
        </div>
        <div class="col-md-4 mix logo code">
            <img src="images/p-2.jpg" alt="">
        </div>
        <div class="col-md-4 mix app logo">
            <img src="images/p-3.jpg" alt="">
        </div>
        <div class="col-md-4 mix code">
            <img src="images/p-4.jpg" alt="">
        </div>
        <div class="col-md-4 mix app logo">
            <img src="images/p-5.jpg" alt="">
        </div>
        <div class="col-md-4 mix web">
            <img src="images/p-6.jpg" alt="">
        </div>
    </div>
</div>


</body>
</html>